<template>
  <el-container v-loading="loading" class="post-article">
    <el-header class="header">
      <el-select v-model="article.cid" placeholder="请选择文章栏目" style="width: 150px;">
        <el-option
          v-for="item in categories"
          :key="item.id"
          :label="item.cateName"
          :value="item.id">
        </el-option>
      </el-select>
      <el-input v-model="article.title" placeholder="请输入标题..." style="width: 400px;margin-left: 10px"></el-input>
      <el-tag
        :key="tag"
        v-for="tag in article.dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)" style="margin-left: 10px">
        {{tag}}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="tagInputVisible"
        v-model="tagValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm">
      </el-input>
      <el-button v-else class="button-new-tag" type="primary" size="small" @click="showInput">+Tag</el-button>
    </el-header>
    <el-main class="main">
      <div id="editor">
        <mavon-editor style="height: 100%;width: 100%;" ref=md @imgAdd="imgAdd"
                      @imgDel="imgDel" v-model="article.mdContent"></mavon-editor>
      </div>
      <div style="display: flex;align-items: center;margin-top: 15px;justify-content: flex-end">
        <el-button @click="cancelEdit" v-if="from!=undefined">放弃修改</el-button>
        <template v-if="from==undefined || from=='draft'">
          <el-button @click="saveBlog(0)">保存到草稿箱</el-button>
          <el-button type="primary" @click="saveBlog(1)">发表文章</el-button>
        </template>
        <template v-else="from==post">
          <el-button type="primary" @click="saveBlog(1)">保存修改</el-button>
        </template>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import {postRequest} from '../utils/api'
import {putRequest} from '../utils/api'
import {deleteRequest} from '../utils/api'
import {getRequest} from '../utils/api'
import {uploadFileRequest} from '../utils/api'
// Local Registration
import {mavonEditor} from 'mavon-editor'
// 可以通过 mavonEditor.markdownIt 获取解析器markdown-it对象
import 'mavon-editor/dist/css/index.css'
import {isNotNullORBlank} from '../utils/utils'

export default {
  mounted: function () {
    this.getCategories();
    var from = this.$route.query.from;
    this.from = from;
    var _this = this;
    if (from != null && from != '' && from != undefined) {
      var id = this.$route.query.id;
      this.id = id;
      this.loading = true;
      getRequest("/article/" + id).then(resp => {
        _this.loading = false;
        if (resp.status == 200) {
          _this.article = resp.data;
          var tags = resp.data.tags;
          _this.article.dynamicTags = []
          for (var i = 0; i < tags.length; i++) {
            _this.article.dynamicTags.push(tags[i].tagName)
          }
        } else {
          _this.$message({type: 'error', message: '页面加载失败!'})
        }
      }, resp => {
        _this.loading = false;
        _this.$message({type: 'error', message: '页面加载失败!'})
      })
    }
  },
  components: {
    mavonEditor
  },
  methods: {
    cancelEdit() {
      this.$router.go(-1)
    },
    saveBlog(state) {
      if (!(isNotNullORBlank(this.article.title, this.article.mdContent, this.article.cid))) {
        this.$message({type: 'error', message: '数据不能为空!'});
        return;
      }
      var _this = this;
      _this.loading = true;
      postRequest("/article/", {
        id: _this.article.id,
        title: _this.article.title,
        mdContent: _this.article.mdContent,
        htmlContent: _this.$refs.md.d_render,
        cid: _this.article.cid,
        state: state,
        dynamicTags: _this.article.dynamicTags
      }).then(resp => {
        _this.loading = false;
        if (resp.status == 200 && resp.data.status == 'success') {
          _this.article.id = resp.data.msg;
          _this.$message({type: 'success', message: state == 0 ? '保存成功!' : '发布成功!'});
//            if (_this.from != undefined) {
          window.bus.$emit('blogTableReload')
//            }
          if (state == 1) {
            _this.$router.replace({path: '/articleList'});
          }
        }
      }, resp => {
        _this.loading = false;
        _this.$message({type: 'error', message: state == 0 ? '保存草稿失败!' : '博客发布失败!'});
      })
    },
    imgAdd(pos, $file) {
      var _this = this;
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append('image', $file);
      uploadFileRequest("/article/uploadimg", formdata).then(resp => {
        var json = resp.data;
        if (json.status == 'success') {
//            _this.$refs.md.$imgUpdateByUrl(pos, json.msg)
          _this.$refs.md.$imglst2Url([[pos, json.msg]])
        } else {
          _this.$message({type: json.status, message: json.msg});
        }
      });
    },
    imgDel(pos) {

    },
    getCategories() {
      let _this = this;
      getRequest("/admin/category/all").then(resp => {
        _this.categories = resp.data;
      });
    },
    handleClose(tag) {
      this.article.dynamicTags.splice(this.article.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.tagInputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let tagValue = this.tagValue;
      if (tagValue) {
        this.article.dynamicTags.push(tagValue);
      }
      this.tagInputVisible = false;
      this.tagValue = '';
    }
  },
  data() {
    return {
      categories: [],
      tagInputVisible: false,
      tagValue: '',
      loading: false,
      from: '',
      article: {
        id: '-1',
        dynamicTags: [],
        title: '',
        mdContent: '',
        cid: ''
      }
    }
  }
}
</script>
<style>
.post-article > .main > #editor {
  width: 100%;
  height: 450px;
  text-align: left;
}

.post-article > .header {
  background-color: #ececec;
  margin-top: 10px;
  padding-left: 5px;
  display: flex;
  justify-content: flex-start;
}

.post-article > .main {
  /*justify-content: flex-start;*/
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  background-color: #ececec;
  padding-top: 0px;
}

.post-article > .header > .el-tag + .el-tag {
  margin-left: 10px;
}

.post-article > .header > .button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.post-article > .header > .input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.post-article {
}
</style>
